<template>
  <div style="display: inline-block;"  :class="images ? 'hh' : ''">
    <el-upload
      class="avatar-uploader"
      :action="fileUpload_url"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :limit="0"
      list-type="picture-card"
    >
      <img v-if="images" :src="images" class="avatar" />
      <el-icon
        v-if="!images"
        class="iconfont icon-yunduanshangchuan avatar-uploader-icon"
      >
        <p style="font-size: 14px">上传图片</p>
      </el-icon>
    </el-upload>

    <div class="operate-img" v-if="images">
      <span
        @click="dialogVisible = true"
        class="operate-img-icon"
        style="padding-right: 40px"
      >
        <el-icon class="iconfont icon-yulan operate-img-icon"></el-icon>
      </span>
      <span @click="images = ''" class="operate-img-icon">
        <el-icon class="iconfont icon-shanchu operate-img-icon"></el-icon>
      </span>
    </div>
    <el-dialog v-model="dialogVisible" style="width: 600px">
      <img
        :src="images"
        alt="Preview Image"
        style="height: 500px; width: 500px"
      />
    </el-dialog>
  </div>
</template>

<script >
import { fileUpload_url, fileDownload_url } from "@/config/conster";
import { reactive, toRefs } from "vue";

export default {
  name: "test",
  // props: {
  //   images: {
  //     type: String,
  //     default: "",
  //   },},
  setup() {
    let data = reactive({
      images: "",
      dialogVisible: false,
      fileUpload_url: fileUpload_url,
    });

    //文件上传成功
    const handleAvatarSuccess = (response, file) => {
      console.log(response);
      data.images = fileDownload_url + response.data;
      // props.imageTransfer = data.images;
      console.log(data.images);
      // console.log(props.imageTransfer);
    };

    //文件上传失败
    const beforeAvatarUpload = (file) => {
      const imgTypes = ["image/jpeg", "image/png", "image/gif"];
      const isJPG = imgTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        ElMessage.error("图片格式必须是jpg、png、gif");
      }
      if (!isLt2M) {
        ElMessage.error("图片格大小不能超过2M");
      }
      return isJPG && isLt2M;
    };

    return { ...toRefs(data), handleAvatarSuccess, beforeAvatarUpload };
  },
};
</script>

<style >

.avatar-uploader {
  position: relative;
  width: 178px;
  height: 178px;
  margin-left: calc(50% - 89px);
}
.avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  flex-direction: column;
}

.el-upload--picture-card {
  --el-upload-picture-card-size: 178px;
}

.el-form-item__error {
  font-size: 14px;
  left: 11px;
}



.avatar {
  text-align: center;
  width: 178px;
  height: 178px;
}

.operate-img {
  position: absolute;
  width: 178px;
  height: 178px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 178px;
  left: 0px;
  top: 0px;
  display: none;
}

.hh:hover .operate-img {
  display: block;
}

.operate-img .operate-img-icon {
  font-size: 24px;
  color: #fff;
  border: 1px solid red;
}
</style>
 